<template>
    <div class="container container-demand">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-top">
                <a-carousel autoplay arrows draggable>
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox" v-for="item in bannerList">
                        <img class="page-top-bg" :src="item" />

                    </div>
                </a-carousel>

                <div class="page-top-panel">
                    <div class="page-top-title">创新需求列表</div>
                    <div class="top-input-box">
                        <input class="top-input" v-model="keywords" type="text" placeholder="输入您想查找的需求…" @keyup.enter="resetList">
                        <a-icon class="top-input-ico" type="search" @click="resetList" />
                    </div>
                </div>
            </div>
            <div class="search-panel">
                <div class="search-top">
                    <div class="search-switch" @click="searchShow=!searchShow">
                        <a-icon type="filter" />
                        <span>筛选列表</span>
                        <a-icon type="caret-down" />
                    </div>
                    <a-button type="primary" class="search-top-btn" @click="resetList">搜索</a-button>
                    <a-button type="warning" class="search-top-btn" @click="addDemand" v-if="validAddDemand()">新增需求</a-button>
                </div>

                <div class="search-main" :class="searchShow &&'search-main-show'">
                    <div class="search-row">
                        <div class="search-title">分类</div>
                        <a-checkbox-group v-model="pageParams.category" @change="searchChange('category')">
                            <a-checkbox value="生产研发需求">生产研发需求</a-checkbox>
                            <a-checkbox value="技术服务需求">技术服务需求</a-checkbox>
                            <a-checkbox value="临床效果需求">临床效果需求</a-checkbox>
                            <a-checkbox value="生产技术需求">生产技术需求</a-checkbox>
                            <a-checkbox value="其他">其他需求</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">细分领域</div>
                        <a-checkbox-group v-model="pageParams.subCategoryStr" @change="searchChange('subCategoryStr')">
                            <a-checkbox :value="item.content" v-for="item in territoryList"
                                :key="item.id">{{item.content}}</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <!-- <div class="search-row">
                        <div class="search-title">拟投入金额</div>
                        <a-input class="search-input" v-model="pageParams.investmentMin" placeholder="请输入"></a-input>
                        <span>~</span>
                        <a-input class="search-input" v-model="pageParams.investmentMax" placeholder="请输入"></a-input>
                        <span> 万元</span>
                    </div> -->
                    <div class="search-action" @click="searchShow=!searchShow">
                        <span>收起</span>
                        <a-icon type="double-left" />
                    </div>
                </div>
            </div>
            <div class="page-content" v-if="pageList.length>0">
                <div>
                    <template v-for="item in pageList">
                        <PageListVue @clickList="jumpDetail" :listInfo="item" />
                    </template>
                </div>
                <div style="text-align:right">
                    <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange" />
                </div>

            </div>
            <div class="page-content" v-else>
                <div class="list-null">
                    <div class="iconfont">&#xe642;</div>
                    <div>暂无数据</div>
                </div>

            </div>
        </a-spin>
        <AddDemandVue :visible="addDemandVisible" @closeModal="() => addDemandVisible = false" :isAdd="true" />
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component } from "vue-property-decorator";
import PageListVue from "./components/pageList.vue";
import AddDemandVue from "@/components/addDemand.vue";
import { getStorageUserInfo } from "@/utils";
import { UserModule } from "@/store/modules/userModules";
@Component({
    name: "dom",
    components: { PageListVue, AddDemandVue },
})
export default class index extends Vue {
    pageNum = 1;
    pageSize = 10;
    total = 0;
    keywords = "";
    loading = false;
    searchShow = false;
    pageParams = {};
    jumpDetail(listInfo) {
        // 如果没登录 提示登录
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }
        this.$router.push({ name: "demandDetail", query: { id: listInfo.id } });
    }
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }
    mounted() {
        this.loading = true;
        Promise.all([this.getTerritoryList(), this.getBanner()]).then(() => {
            this.loading = false;
            this.getList();
        });
    }

    pageList = [];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const pageParamsStr = {};
            for (let i in this.pageParams) {
                if (this.pageParams[i] && typeof this.pageParams[i] === "object") {
                    pageParamsStr[i] = this.pageParams[i].join(",");
                } else {
                    pageParamsStr[i] = this.pageParams[i];
                }
            }
            const res = await api.getDemandList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                demandName: this.keywords,
                ...pageParamsStr,
            });
            this.pageList = res.data?.rows ||[];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }
    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //
        }
    }
    addDemandVisible = false;
    addDemand() {
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }
        this.addDemandVisible = true;
    }
    validAddDemand() {
        const userInfo = getStorageUserInfo();
        if (userInfo.roleName === "需求方") {
            return true;
        } else if (userInfo.roleName === "中介方") {
            return true;
        } else if (userInfo.roleName === "管理员") {
            return true;
        }
        return false;
    }

    bannerList = [""];
    async getBanner() {
        this.pageList = [];
        try {
            const res = await api.getBannerList({
                pageTable: "创新需求banner",
            });

            const rows = res.data?.rows ||[];
            const pictures=rows[0]?.pictures||''
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            //this.loading = false;
        }
    }

    searchChange(type) {
        const one = this.pageParams[type];
        if (one && one.length > 1) {
            this.pageParams[type] = [one[one.length - 1]];
        }
        this.resetList()
    }
}
</script>

<style lang="scss">
.container-demand {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 80%;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 140px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        border-radius: 0 100px 100px 0;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1350px;
    }
    .page-content-list {
        width: 49%;
        margin-right: 2%;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 8px;
        display: inline-block;
        padding: 15px;
    }
    .page-content-list:nth-child(2n) {
        margin-right: 0;
    }
    // .list-top {
    //     display: flex;
    //     border-bottom: solid 1px #eee;
    // }
    // .list-left {
    //     height: 200px;
    //     width: 280px;
    //     flex-shrink: 0;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     margin-right: 15px;
    // }
    // .list-left-img {
    //     max-height: 100%;
    //     max-width: 100%;
    // }
    // .list-right {
    //     flex-shrink: 0;
    //     width: 1px;
    //     flex-grow: 1;
    // }
    // .list-title {
    //     font-weight: bold;
    //     font-size: 18px;
    //     color: #333333;
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    // }
    // .list-price {
    //     color: #e94637;
    // }
    // .list-company {
    //     font-size: 16px;
    //     color: #333333;
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     margin-top: 5px;
    //     .type-success {
    //         margin-right: 0;
    //     }
    // }
    // .list-category {
    //     font-size: 16px;
    //     color: #333333;
    //     margin-top: 5px;
    // }
    // .list-content {
    //     margin-top: 5px;
    //     font-size: 14px;
    //     color: #505050;
    // }
    // .list-addr {
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //     margin-top: 10px;
    //     .iconfont {
    //         margin-right: 5px;
    //     }
    //     font-size: 14px;
    // }
    // .list-bottom {
    //     display: flex;
    //     align-items: center;
    //     padding-top: 10px;
    // }
    // .list-bottom-left {
    //     flex-grow: 1;
    //     flex-shrink: 0;
    // }
    // .list-userbox {
    //     display: flex;
    //     align-items: center;
    // }
    // .list-user-img {
    //     width: 35px;
    //     height: 35px;
    //     border-radius: 35px;
    //     margin-right: 8px;
    // }
    // .list-usertitle {
    //     font-size: 12px;
    // }
    // .list-username {
    //     font-size: 14px;
    //     .type-warning {
    //         margin-right: 0;
    //         font-size: 12px;
    //         padding: 1px 5px;
    //     }
    // }
}
</style>
